<template>
  <el-dialog
    :title="modalConfig.modalTitle"
    :visible="modalConfig.modalShow"
    :width="`${modalConfig.width || '500px'}`"
    :before-close="handleCancel"
    :close-on-click-modal="false"
    v-bind="modalConfig.props"
  >
    <el-form
      :ref="formName"
      size="small"
      :model="form"
      :rules="modalConfig.rules"
      :label-width="formLabelWidth"
      @submit.native.prevent
    >
      <el-form-item
        v-for="item in modalConfig.items"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        v-bind="item"
      >
        <el-input
          v-if="item.type === DATA_TYPE_INPUT"
          v-model.trim="form[item.prop]"
          auto-complete="off"
          :placeholder="`请输入${item.label}`"
          style="width:100%"
          :maxlength="item.maxlength"
          :disabled="item.disabled && item.disabled()"
          @keyup.enter.native="item.enterTrigger && handleOk"
        />
        <el-radio-group
          v-else-if="item.type === DATA_TYPE_RADIO_GROUP"
          v-model="form[item.prop]"
        >
          <el-radio
            v-for="(val, key) in item.enumMap"
            :key="key"
            :label="key"
          >
            {{ val }}
          </el-radio>
        </el-radio-group>
        <el-select
          v-else-if="item.type === DATA_TYPE_SELECT"
          v-model="form[item.prop]"
          :placeholder="item.placeholder"
          :clearable="item.clearable"
          :filterable="item.filterable"
          style="width:100%"
          :disabled="item.disabled && item.disabled()"
        >
          <el-option
            v-for="optionItem in getOptions(item.options)"
            :key="optionItem[item.valueKey || 'value']"
            :value="optionItem[item.valueKey || 'value']"
            :label="optionItem[item.labelKey || 'label']"
          />
        </el-select>
        <el-date-picker
          v-if="item.type === DATA_TYPE_DATE_PICK"
          v-model="form[item.prop]"
          type="date"
          :placeholder="item.placeholder"
          :value-format="item.format"
          :format="item.format"
          style="width: 100%"
          :disabled="item.disabled && item.disabled()"
        />
        <el-date-picker
          v-else-if="item.type === DATA_TYPE_DATE_RANGE"
          v-model="form[item.prop]"
          :type="`${item.rangeType || 'daterange'}`"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
          :disabled="item.disabled && item.disabled()"
        />
        <CommonUpload
          v-else-if="item.type === DATA_TYPE_UPLOAD"
          :def-img-list="form[item.prop]"
          v-bind="$attrs"
          v-on="$listeners"
        />
        <span v-else>{{ handleDefaultValue(item, form) }}</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel">{{ cancelText }}</el-button>
      <el-button
        v-if="showOk"
        type="primary"
        size="small"
        @click="handleOk"
      >
        {{ okText }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import CommonUpload from '../CommonUpload'
import {
  DATA_TYPE_INPUT,
  DATA_TYPE_RADIO_GROUP,
  DATA_TYPE_SELECT,
  DATA_TYPE_UPLOAD,
  DATA_TYPE_DATE_PICK,
  DATA_TYPE_DATE_RANGE
} from './Constant'

export default {
  name: 'CommonDialog',
  components: {
    CommonUpload
  },
  inheritAttrs: false,
  props: {
    modalConfig: {
      type: Object,
      required: true
    },
    form: {
      type: Object,
      required: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    okText: {
      type: String,
      default: '确定'
    },
    showOk: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      DATA_TYPE_INPUT,
      DATA_TYPE_SELECT,
      DATA_TYPE_RADIO_GROUP,
      DATA_TYPE_UPLOAD,
      DATA_TYPE_DATE_PICK,
      DATA_TYPE_DATE_RANGE
    }
  },
  computed: {
    formLabelWidth() {
      return this.modalConfig.labelWidth || '100px'
    },
    formName() {
      return this.modalConfig.formName || 'modalForm'
    }
  },
  methods: {
    getOptions(val) {
      return typeof val === 'function' ? val() : val
    },
    handleCancel() {
      if (this.modalConfig.items && this.modalConfig.items.length > 0) {
        this.$refs[this.formName].clearValidate()
        this.$refs[this.formName].resetFields()
      }
      this.$emit('onCancel')
    },
    handleOk() {
      if (this.modalConfig.items && this.modalConfig.items.length > 0) {
        this.$refs[this.formName].validate((valid) => {
          if (valid) {
            this.$refs[this.formName].clearValidate()
            this.$emit('onOk', this.form)
          } else {
            return false
          }
        })
      } else {
        this.$emit('onOk')
      }
    },
    handleDefaultValue(item, curItem) {
      if (typeof item.defaultValue === 'string') {
        return item.defaultValue
      } else if (typeof item.defaultValue === 'function') {
        return item.defaultValue(curItem)
      }
      return ''
    }
  }
}
</script>

<style scoped>

</style>
